<template>
  <!-- 上方的查询表单-->
  <div>
    <!-- {{ queryInfo }} -->
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="queryInfo.orderBy" style="width: 160px">
          <el-option
            v-for="d in orderList"
            :key="d.value"
            :label="d.label"
            :value="d.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="queryInfo.tname"
          placeholder="请输入球队名称"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="queryInfo.league"
          placeholder="请输入所属联赛"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button type="danger" @click="reset">重置</el-button>
          <el-button type="primary" @click="requery">查询</el-button>
          <el-button type="success" @click="showAdd">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据呈现的部分 -->

  <div v-loading="loading">
    <el-table :data="list">
      <el-table-column prop="ftid" label="主键编号" width="100" />
      <el-table-column label="球队名称" width="120">
        <template #default="scope">
          <a href="#" @click.prevent="queryDetail(scope.row)">{{
            scope.row.tname
          }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="league" label="所属联赛" />
      
      <el-table-column prop="champions" label="	联赛冠军数量" />
      <el-table-column prop="cups" label="	杯赛冠军数量" />
      <el-table-column prop="fans" label="	粉丝数（万）" />
      <el-table-column prop="goals" label="	进球数记录" />
      <el-table-column prop="gname" label="	进球数记录保持者" />
      <el-table-column label="俱乐部创建时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.created) }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="showModify(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        background
        layout="prev, pager, next, total, sizes"
        :page-sizes="[1, 5, 10, 20]"
        :total="page.total"
        v-model:page-size="page.pageSize"
        v-model:current-page="page.pageNumber"
        @current-change="query"
        @size-change="query"
      />
    </div>
  </div>

  <!--查看内容的对话框-->
  <el-dialog :title="detail.tname" v-model="dvisible">
    <div>
      <div v-html="detail.intro"></div>
    </div>
  </el-dialog>

  <!--填加的对话框-->
  <el-dialog title="添加球队" v-model="avisible" @closed="requery">
    <div>
      <el-form>
        <el-form-item label="球队名称">
          <el-input v-model="addInfo.tname" />
        </el-form-item>

        <el-form-item label="所属联赛">
          <el-input v-model="addInfo.league" />
        </el-form-item>

        <el-form-item label="球队简介">
          <el-input v-model="addInfo.intro" :rows="15" type="textarea" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联赛冠军数">
              <el-input-number v-model="addInfo.champions" :min="1" :max="10" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="杯赛冠军数">
              <el-input-number v-model="addInfo.cups" :min="1" :max="10" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="粉丝数(万)">
              <el-input-number v-model="addInfo.fans" :min="1" :max="10" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="进球数记录">
              <el-input-number v-model="addInfo.goals" :min="1" :max="10" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="进球记录保持者">
          <el-input v-model="addInfo.gname" />
        </el-form-item>
    
        <!-- 日历-->
        <el-form-item>
          <el-date-picker
            v-model="addInfo.created"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="俱乐部创建时间"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div>
        <el-button type="danger" @click="avisible = false">取消</el-button>
        <el-button type="info" @click="resetAdd">重填</el-button>
        <el-button type="success" @click="add">添加</el-button>
      </div>
    </template>
  </el-dialog>

  <!--修改的对话框-->
  <el-dialog title="修改球员" v-model="mvisible" @closed="requery">
    <div>
      <el-form>
        <el-form-item label="球队名称">
          <el-input v-model="addInfo.tname" />
        </el-form-item>

        <el-form-item label="所属联赛">
          <el-input v-model="modifyInfo.league" />
        </el-form-item>

        <el-form-item label="球队简介">
          <el-input v-model="modifyInfo.intro" :rows="15" type="textarea" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联赛冠军数">
              <el-input-number
                v-model="modifyInfo.champions"
                :min="1"
                :max="10"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="杯赛冠军数">
              <el-input-number v-model="modifyInfo.cups" :min="1" :max="10" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="粉丝数(万)">
              <el-input-number v-model="modifyInfo.fans" :min="1" :max="10" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="进球数记录">
              <el-input-number v-model="modifyInfo.goals" :min="1" :max="10" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="进球记录保持者">
          <el-input v-model="modifyInfo.gname" />
        </el-form-item>

        <!-- 日历-->
        <el-form-item>
          <el-date-picker
            v-model="modifyInfo.created"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="俱乐部创建时间"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div>
        <el-button type="danger" @click="mvisible = false">取消</el-button>
        <el-button type="success" @click="modify">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { Api } from '../script/Api';
import { Tools } from '../script/Tools';
import { ElMessageBox, ElMessage } from 'element-plus';
//#region 查询的部分

const loading = ref(false);

const page = ref({
  pageNumber: 1,
  pageSize: 5,
});

const queryInfo = ref({
  orderBy: 1,
  tname: '',
  league: '',
});

const list = ref([]);

const reset = () => {
  queryInfo.value = {
    orderBy: 1,
    tname: '',
    league: '',
  };
  requery();
};

const requery = () => {
  page.value.pageNumber = 1;
  query();
};

const orderList = ref([
  { label: '粉丝数', value: 1 },
  { label: '联赛冠军数', value: 2 },
  { label: '杯赛冠军数', value: 3 },
  { label: '数据添加时间', value: 4 },
]);

const query = () => {
  loading.value = true;
  Api.get(
    '/crud/footballteam',
    Tools.concatJson(page.value, queryInfo.value),
    (data) => {
      loading.value = false;
      if (data.success) {
        list.value = data.data.data;
        page.value = data.data.pageBean;
      } else {
        ElMessageBox.alert(data.message, '公告');
      }
    }
  );
};

query();

//#endregion

//#region 添加的部分
const avisible = ref(false);

const addInfo = ref({
  tname: '',
  league: '',
  intro: '',
  champions: 0,
  cups: 0,
  fans: 0,
  goals: 0,
  gname: '',
});

const resetAdd = () => {
  addInfo.value = {
    tname: '',
    league: '',
    intro: '',
    champions: 0,
    cups: 0,
    fans: 0,
    goals: 0,
    gname: '',
  };
};

const showAdd = () => {
  resetAdd();
  avisible.value = true;
};

const add = () => {
  Api.post('/crud/footballteam', addInfo.value, (data) => {
    if (data.success) {
      ElMessageBox.alert(data.message, '发布');
      resetAdd();
    } else {
      ElMessageBox.alert(data.message, '发布');
    }
  });
};

//#endregion

//#region 查看详情的部分
const dvisible = ref(false);
const detail = ref({});

const queryDetail = (info) => {
  Api.get(`/crud/footballteam/${info.ftid}`, {}, (data) => {
    if (data.success) {
      detail.value = data.data;
      dvisible.value = true;
    } else {
      ElMessageBox.alert(data.message, '足球');
    }
  });
};

//#endregion

//#region 修改的部分
const mvisible = ref(false);
const modifyInfo = ref({});

const showModify = (info) => {
  Api.get(`/crud/footballteam/${info.ftid}`, {}, (data) => {
    if (data.success) {
      modifyInfo.value = data.data;
      mvisible.value = true;
    } else {
      ElMessageBox.alert(data.message, '公告');
    }
  });
};

const modify = () => {
  Api.put('/crud/footballteam', modifyInfo.value, (data) => {
    ElMessageBox.alert(data.message, '公告');
  });
};

//#endregion

//#region 删除的部分
const del = (info) => {
  ElMessageBox.confirm(`是否删除: ${info.title}`, '删除信息')
    .then(() => {
      console.log('点击了确定');
      Api.delete(`/crud/footballteam/${info.ftid}`, {}, (data) => {
        if (data.success) {
          ElMessage.success(data.message);
        } else {
          ElMessage.error(data.message);
        }
        requery();
      });
    })
    .catch(() => {
      console.log('点击了取消');
    });
};

//#endregion
</script>

<style scoped></style>
